<template>
  <div class="publisher-box">
    <PublisherInfo :publisherName="publisherName" />
    <div class="publiser-context">
      <div class="publiser-all">
        <PublisherBanner :publisherName="publisherName" />
        <PublisherNewsList :newsList="newsList" :page="page" @switchPage="handlePage" />
      </div>
      <div class="publisher-hot">
        <PublisherHot :publisherName="publisherName" />
      </div>
    </div>
  </div>
</template>

<script>
import PublisherBanner from './PublisherBanner.vue'
import PublisherInfo from './PublisherInfo.vue'
import PublisherNewsList from './PublisherNewsList.vue'
import PublisherHot from './PublisherHot.vue'

export default {
  name: "Publisher",
  props: {
    publisherName: {
      type: String
    }
  },
  components: {
    PublisherInfo, PublisherBanner, PublisherNewsList, PublisherHot
  },
  data() {
    return {
      newsList: "",
      page: {
          currentPage: 1, // 当前页码
          pageSize: 10, // 每页显示的条数
          total: 0, // 默认 0 条，等待数据库渲染
      },
    }
  },
  methods: {
    handlePage(page) {
      this.page = page
      this.getNews(page)
    },
    getNews(page){
      this.$api.serviceNews.post('api/news/publisherNews', 
      {userName: this.publisherName, page: page}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (response.data.code == 200){
          console.log(response);
          this.newsList = response.data.data.pageListData
          this.page.total = response.data.data.total
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
    },
  },
  mounted() {
    this.getNews(this.page)
  }
}
</script>

<style scoped>
.publisher-box {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.publiser-context {
  display: inline-flex;
  align-items: flex-start;
  gap: 46px;
}
.publiser-all {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
</style>